<template>
  <!--
  o1KIj06mfU72CRVpMfzr8rA9AM5
o1KIj08TYpQYVEVyfm933QI9OyOo
o1KIj0746h6VlIbGv2Dtzw52fREc
o1KIj0_V8ebogY4WWS3aM09BntWo
  -->
  <div class="order">
    <!-- 公共标题 -->
    <div class="common-tel">
      收货人信息
      <div class="common-tel-dot">
        <em></em>
        <em></em>
        <em></em>
      </div>
    </div>
    <!-- 收货人信息 -->

    <div class="common-form"style="position: relative;"v-show="addres"@click="addr">
      <div class="order-info">
        <a href="选择收货地址.html" class="order-info-a"style="position: absolute;right: -155px;"></a>
        <div class="order-info-name">
          {{address.name}}  {{address.tel}}
        </div>
        <div class="order-info-add"style="display: flex;width: 100%;">
          <label style="width: auto;">地址：</label>
          <span style="width: auto;">{{address.address}}</span>
        </div>
      </div>
    </div>
    <div class="common-form" v-show="addres2"@click="addr2">
      <div>
        <div class="order-info-none"><em>+</em>添加收货地址</div>
      </div>
    </div>
    <!-- 公共标题 -->
    <div class="common-tel">
      商品信息
      <div class="common-tel-dot">
        <em></em>
        <em></em>
        <em></em>
      </div>
    </div>
    <!-- 商品信息 -->
    <div class="common-form">
      <div class="order-shop">
        <p class="order-shop-tel"><i></i>商家店铺</p>
        <div class="order-shop-info">
          <img :src="imgTitl+List.thumb2">
          <div>
            <p>{{List.goods_name}}</p>
              <p style="width: 35%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-left:8px; text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;">{{List.mas}}件</p>
            <p>￥{{List.goods_price}} <del style="display: none;">￥{{List.market_price2}}</del></p>
          </div>
        </div>
        <div class="order-shop-more">购买数量 <em>{{List.mas}}</em></div>
        <div class="order-shop-more">运费 <em>{{postag == 0?'包邮':postag}}</em></div>
        <div class="order-shop-more"v-show="postag != 0">商品金额 <em>￥{{List.goods_price+postag}}</em></div>
        <div class="order-shop-more"v-show="postag == 0">商品金额 <em style="float: right;">￥{{List.goods_price}}</em></div>
        <div class="order-shop-more"style="display: none;">买家留言 <input type="text" placeholder="选填" /></div>
      </div>
    </div>
    <div class="footer-100"></div>
    <!-- 支付 -->
    <div class="order-footer">
      <div>
        实付款：<span>￥<em>{{List.mas==1?List.subtotal:List.goods_price}}</em></span>
      </div>
      <!--<a href="#">立即支付</a>-->
      <p style="width: 30%;float: left;background: #FE2746;text-align: center;color: #FFF;display: block;"@click="generateOrder">
        立即支付
      </p>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  import WeixinJSBridge from 'weixin-jsapi'

  export default {
    name: 'Order',
    data(){
      return{
        imgTitl:'http://39.96.76.3/HuiWanZhong/public/uploads/',

        goods_id2:'',
        id2:'',

        List:[],
        address:[],
        List2:{},
        addres:false,
        addres2:true,
        city:'',
        postag:'',
        ers:''
      }
    },
    created(){
      this.add();
      this.postage();
      let restoredSession = JSON.parse(sessionStorage.getItem('List'));
      this.List = restoredSession;
      this.List2.goods_id = restoredSession.goods_id;
      this.List2.goods_name = restoredSession.goods_name;
      this.List2.cost_price = restoredSession.cost_price;
      this.List2.market_price = restoredSession.market_price;
      this.List2.spec = restoredSession.spec;
      this.List2.goods_price = restoredSession.goods_price;
      this.List2.qty = restoredSession.qty;
      this.List2.subtotal = restoredSession.subtotal;
      this.List2.type = restoredSession.type;
      this.List2.common_id = restoredSession.common_id;
      this.List2.team_num = restoredSession.team_num;
      // if (restoredSession.address == ''){
      //   this.addres2 = true;
      //   this.addres = false;
      // } else if (restoredSession.address != '') {
      //   this.addres = true;
      //   this.addres2 = false;
      //   this.address.push(restoredSession.address[restoredSession.address.length-1]);
      // }
    },
    methods:{
      add(){
        axios.post('/vipmember/index/getDefaultAddress',qs.stringify({
          'openid':localStorage.getItem('openid'),
        })).then(re=>{
          this.city = re.data.city
          if (re.data == ''){
            this.addres2 = true;
            this.addres = false;
          } else if (re.data != '') {
            this.addres = true;
            this.addres2 = false;
            this.address = re.data;
          }
        });
      },
      postage(){
        axios.post('/index/merchant/goods/query_freight',qs.stringify({
          'openid':localStorage.getItem('openid'),
          'goods_id':'515',
          'province':'北京'
        })).then(re=>{
          this.postag = re.data.price;
        });
      },
      generateOrder(){
        if (this.address == ''){
          this.$notify.info({
            title: '',
            message: '请添加收货地址'
          });
        } else {
          let aaa = JSON.stringify(this.List2);
          axios.post('http://39.96.76.3/HuiWanZhong/public/index.php/teamOrder/index/done',qs.stringify({
            'uId':localStorage.getItem('openid'),
            // 'address_id':this.List.address[this.List.address.length-1].id,
            'address_id':this.address.id,
            'order_tip':'',
            'cart':aaa,
            ' freight':this.postag,
          })).then(re=>{
            // console.log(re.data.pay)
            // 存储用户信息，
            sessionStorage.setItem('Payment', JSON.stringify(''));
            sessionStorage.setItem('Payment', JSON.stringify(re.data));
            let restoredSession = JSON.parse(sessionStorage.getItem('Payment'));
            if (restoredSession.message == '该商品已下架') {
              this.$router.push({name: 'AssemblePage'});
            }else if (re.data.status == false){
              this.$notify({
                // title: '警告',
                message: re.data.message,
                type: 'warning'
              });
              this.$router.push({name:'assemble'})
            } else {
              WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                  "appId":re.data.pay.appId,     //公众号名称，由商户传入
                  "timeStamp":re.data.pay.timeStamp,         //时间戳，自1970年以来的秒数
                  "nonceStr":re.data.pay.nonceStr, //随机串
                  "package":re.data.pay.package,
                  "signType":re.data.pay.signType,         //微信签名方式：
                  "paySign":re.data.pay.paySign //微信签名
                },
                ((res)=>{
                  sessionStorage.setItem('RES', JSON.stringify(res));
                  if(res.err_msg == "get_brand_wcpay_request:ok" ){
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    this.$router.push({name:'AssMyOrder'});
                  }else {
                  };
                }));              // this.$router.push({name:'AssPayment'});
            }
          });
        }
      },
      addr(){
        this.$router.push({name:'AddressList'});
      },
      addr2(){
        this.$router.push({name:'AddressList'});
      },
    }
  }
</script>

<style scoped>
  /*确认订单*/
  .order-info{
    padding: 10px 8px;
    position: relative;
    display: inline-block;
  }
  .order-info-none{
    width:100%;
    height:90px;
    display: inline-block;
    color:#999;
    text-align: center;
    line-height: 90px;
  }
  .order-info-none em{
    font-size:20px;
    color:#999;
    vertical-align: bottom;
  }
  .order-info-a{
    position: absolute;
    right: 10px;
    top: 39%;
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../assets/jiantou.png) no-repeat;
    background-size: 100%;
    margin-top: 0px;
    float: right;
  }
  .order-info-name{
    font-size:15px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .order-info-add label{
    float: left;
    width:14%;
    display: inline-block;
  }
  .order-info-add span{
    float: left;
    width:80%;
    display: inline-block;
  }

  .order-shop,.order-pay{
    width: 94%;
    margin: 3% auto;
    display: inline-block;
    margin-left: 3%;
  }
  .order-shop-tel{
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 10px;
    font-weight: 600;
  }
  .order-shop-tel i{
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../assets/cart.png) no-repeat;
    background-size: 100%;
    margin-top: 0px;
    float: left;
    margin-right: 5px;
  }
  .order-shop-more{
    width: 100%;
    height: 38px;
    line-height: 38px;
    display: inline-block;
  }
  .order-shop div:nth-child(5) em,.order-shop div:nth-child(4) em,.order-shop div:nth-child(3) em,.order-shop div:nth-child(6) input{
    float: right;
  }

  .order-shop div:nth-child(6) input{
    width:100px;
    text-align: right;
    border:0;
    outline: none;
    padding: 10px 0;
  }
  .order-shop img{
    width:80px;
    height:80px;
    border-radius: 5px;
    float: left;
  }
  .order-shop-info{
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    margin-top:10px;
  }
  .order-shop-info div{
    float: left;
    margin-left: 2%;
    width: 71%;
  }
  .order-shop-info div p:nth-child(1){
    width:100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .order-shop-info div p:nth-child(2){
    color:#999;
    margin:10px 0;
    font-size:12px;
  }
  .order-shop-info div p:nth-child(3){
    color:#FE2746;
    font-weight: 600;
  }
  .order-shop-info div p:nth-child(3) del{
    color:#999;
    font-size:12px;
    font-weight: normal;
  }
  .order-pay{
    position: relative;
  }
  .order-pay img{
    width:40px;
    height:40px;
    float: left;
    border-radius: 50%;
  }
  .order-pay div{
    width: 60%;
    float: left;
    margin-left: 3%;
  }
  .order-pay div p:nth-child(2){
    color: #999;
    font-size: 12px;
    margin-top: 5px;
  }
  .order-pay em{
    width: 10px;
    height: 10px;
    display: inline-block;
    border: 1px solid rgba(187, 187, 187, 1);
    border-radius: 50%;
    position: absolute;
    top:36%;
    right: 10px;
  }
  .order-pay-pink{
    border: 1px solid #FE2746 !important;
    background: #FE2746;
  }
  .order-footer{
    position: fixed;
    bottom: 0;
    left:0;
    height:49px;
    line-height: 49px;
    width:100%;
    background: #FFF;
  }
  .order-footer div{
    width:67%;
    float: left;
    margin-left: 3%;
    background: #FFF;
  }
  .order-footer div span{
    color:#FE2746;
  }
  .order-footer div span em{
    font-size:15px;
    font-weight: 600;
    color:#FE2746;
  }
  .order-footer a{
    width:30%;
    float: left;
    background: #FE2746 ;
    text-align: center;
    color:#FFF;
  }
</style>
